<template>
  <dv-border-box-12 class="center">
    <div class="d-flex" style="margin-left:10px">
      <span>
        <span><i class="iconfont icon-align-left"></i></span>
      </span>
      <span class="fs-xl text mx-2 mt-1" style="font-size:19px;color: #eaedf3;">{{ title }}</span>
    </div>
     <!-- 添加滚动容器包裹图表 -->
    <div class="chart-scroll-container" ref="chartContainer">
      <dv-capsule-chart
        :config="config"
        id="bar-chart"
        @chart-ready="handleChartReady"
      />
    </div>
  </dv-border-box-12>
</template>

<script lang=ts>
import { defineComponent, reactive, watch, PropType, nextTick, ref } from "vue";
export default defineComponent({
  components: {},
  props: {
    title: {
      type: String,
      default: "",
    },
    statisticsData: {
      type: Array as PropType<Array<{name: string; value: number; lastWeekNum?: number}>>,
      default: () => []
    }
  },
  setup(props) {
    // 初始化数据
    const config = reactive({
      data: props.statisticsData,
      rowNum: 5,
      showValue: true
    });

    const chartContainer = ref<HTMLElement | null>(null);

    // 处理空行的方法 - 修复类型错误
    const handleEmptyRows = () => {
      if (!chartContainer.value) return;
      
      // 查找所有label-column下的div元素，并指定为HTMLElement类型
      const labelDivs = chartContainer.value.querySelectorAll<HTMLElement>('.label-column > div');
      
      labelDivs.forEach(div => {
        // 清除空白字符并检查是否为空
        const trimmedText = div.textContent?.trim() || '';
        // 检查是否为空或仅包含&nbsp;
        if (trimmedText === '' || trimmedText === '\u00A0') {
          div.style.display = 'none'; // 现在TypeScript能识别style属性了
        }
      });
    };

    // 图表就绪时处理
    const handleChartReady = () => {
      nextTick(handleEmptyRows);
    };
    // 监听数据变化并更新图表
    watch(
      () => props.statisticsData,
      (newData) => {
        config.data = newData;
        nextTick(handleEmptyRows);
      },
      { deep: true }
    );

    return {
      config,
      chartContainer,
      handleChartReady
    };
  },
});
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  flex-direction: column;
  height: 300px; // 保持卡片固定高度
  .d-flex {
    margin-top: 4%;
  }
  // 图表滚动容器样式
  .chart-scroll-container {
    width: 97%;
    height: 80%; // 减去标题高度
    overflow-y: auto; // 启用垂直滚动
    overflow-x: hidden; // 启用垂直滚动
    padding-right: 5px; // 避免滚动条遮挡内容
    
    // 自定义滚动条
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-track {
      background: rgba(15, 19, 37, 0.5);
      border-radius: 2px;
    }
    &::-webkit-scrollbar-thumb {
      background: #568aea;
      border-radius: 2px;
    }
  }
  #bar-chart {
    font-size: 10px;
    width: 95%;
    min-height: 90%; // 确保内容高度足够时才会滚动
  }
  ::v-deep .dv-capsule-chart {
   .unit-label {
      display: none;
    }
  }
}
</style>